<template>
  <div ref="pageWrapperRef" class="page-detail-wrapper">
    <div class="page-detail-box" :style="style">
      <div v-if="header" class="page-detail-header">
        <PageHeader :title="title" :subtitle="subtitle" :show-back="showBack">
          <template #title>
            <slot name="title" />
          </template>
          <template v-if="$slots.subtitle" #subtitle>
            <slot name="subtitle" />
          </template>
          <template #extra>
            <slot name="headerExtra" />
          </template>
        </PageHeader>
      </div>
      <div class="page-detail-content" :style="contentStyle">
        <slot />
      </div>
      <div
        v-if="footer"
        class="page-detail-bottom-wrapper"
        :style="{ width: `${pageWidth}px` }"
      >
        <div class="page-detail-bottom-left">
          <slot name="footerLeft" />
        </div>
        <div class="page-detail-bottom-right">
          <slot name="footerRight" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {
    ref,
    defineProps,
    computed,
    onMounted,
    onBeforeUnmount,
    onActivated,
    onDeactivated,
  } from 'vue';
  import lodash from 'lodash';
  import { useResizeObserver } from '@vueuse/core';
  import { PageHeader } from '@arco-design/web-vue';
  import { pageContainerDetailProps } from './props';

  const { debounce } = lodash;

  const props = defineProps(pageContainerDetailProps);

  const pageWidth = ref(0);

  const style = computed(() => {
    return {
      paddingBottom: props?.footer ? '48px' : '',
      backgroundColor: props.backgroundColor,
      border: props.border ? '1px solid rgb(229, 230, 235)' : '',
    };
  });

  const pageWrapperRef = ref<any>();
  let hasAdd = false;

  const event = () => {
    pageWidth.value = pageWrapperRef.value.offsetWidth;
  };

  const resizeEvent = debounce(event, 100);

  let stopEvent: any;

  const addResizeEvent = () => {
    if (hasAdd) return;
    hasAdd = true;
    const { stop } = useResizeObserver(pageWrapperRef, resizeEvent);
    stopEvent = stop;
  };

  const removeResizeEvent = () => {
    hasAdd = false;
    stopEvent();
  };
  onMounted(() => {
    addResizeEvent();
  });

  onActivated(() => {
    addResizeEvent();
  });

  onBeforeUnmount(() => {
    removeResizeEvent();
  });

  onDeactivated(() => {
    removeResizeEvent();
  });
</script>

<style lang="less">
  .page-detail-wrapper {
    padding: 0 12px 12px;
    .page-detail-box {
      border-radius: 2px;
    }
    .page-detail-header {
    }
    .page-detail-content {
      width: 100%;
      padding: 16px;
    }
  }
  .page-detail-bottom-wrapper {
    position: fixed;
    bottom: 0;
    z-index: 10;

    padding: 0 16px;
    display: flex;
    width: 100%;
    height: 48px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);

    .page-detail-bottom-left {
      flex-shrink: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .page-detail-bottom-right {
      flex-shrink: 1;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>
